<!--
  -    Copyright (c) 2018-2025, hycloud All rights reserved.
  -
  - Redistribution and use in source and binary forms, with or without
  - modification, are permitted provided that the following conditions are met:
  -
  - Redistributions of source code must retain the above copyright notice,
  - this list of conditions and the following disclaimer.
  - Redistributions in binary form must reproduce the above copyright
  - notice, this list of conditions and the following disclaimer in the
  - documentation and/or other materials provided with the distribution.
  - Neither the name of the pig4cloud.com developer nor the names of its
  - contributors may be used to endorse or promote products derived from
  - this software without specific prior written permission.
  - Author: hycloud
  -->
<template>
    <div class="execution">
        <basic-container>
          <el-tabs tab-position="top" v-model="activeName">
            <el-tab-pane label="待办列表" name="db">
              <avue-crud ref="crud"
                        :page.sync="page"
                        :data="tableDataTo"
                        :permission="permissionList"
                        :table-loading="tableLoading"
                        :option="tableOption"
                        :cellStyle="cellStyle"
                        @on-load="getListTo"
                        @search-change="searchChange"
                        @refresh-change="refreshChange"
                        @size-change="sizeChange"
                        @current-change="currentChange">
                          <template slot="useBeginTime" slot-scope="scope">
                              <span>{{transDate(scope.row.useBeginTime)}} 至 {{transDate(scope.row.useBeginTime)}}</span>
                          </template>
                          <template slot="menu" slot-scope="scope">
                              <el-button type="text"
                              icon="el-icon-edit-outline"
                              size="small"
                              @click="goDetail(scope)">办理</el-button>
                          </template>
              </avue-crud>
            </el-tab-pane>
            <el-tab-pane label="已办列表" name="yb">
              <avue-crud ref="crud"
                        :page.sync="page1"
                        :data="tableDataDone"
                        :permission="permissionList"
                        :table-loading="tableLoading1"
                        :option="tableOption"
                        :cellStyle="cellStyle"
                        @on-load="getListDone"
                        @search-change="searchChange1"
                        @refresh-change="refreshChange1"
                        @size-change="sizeChange1"
                        @current-change="currentChange1">
                          <template slot="useBeginTime" slot-scope="scope">
                              <span>{{transDate(scope.row.useBeginTime)}} 至 {{transDate(scope.row.useBeginTime)}}</span>
                          </template>
                          <template slot="menu" slot-scope="scope">
                              <el-button type="text"
                              icon="el-icon-view"
                              size="small"
                              @click="goDetail(scope)">详情</el-button>
                          </template>
              </avue-crud>
            </el-tab-pane>
            <el-tab-pane label="我提交的" name="wtj">
              <avue-crud ref="crud"
                        :page.sync="page2"
                        :data="tableDataMy"
                        :permission="permissionList"
                        :table-loading="tableLoading2"
                        :option="tableOption"
                        :cellStyle="cellStyle"
                        @on-load="getLisMy"
                        @search-change="searchChange2"
                        @refresh-change="refreshChange2"
                        @size-change="sizeChange2"
                        @current-change="currentChange2">
                          <template slot="useBeginTime" slot-scope="scope">
                              <span>{{transDate(scope.row.useBeginTime)}} 至 {{transDate(scope.row.useBeginTime)}}</span>
                          </template>
                          <template slot="menu" slot-scope="scope">
                              <el-button type="text"
                              icon="el-icon-view"
                              size="small"
                              @click="goDetail(scope)">详情</el-button>
                          </template>
              </avue-crud>
            </el-tab-pane>
          </el-tabs>
        </basic-container>
        <el-dialog
            :visible.sync="modal1"
            v-if="modal1"
            title="申请"
            width="1200px"
            top="5vh"
            class="view-dialog"
            :close-on-click-modal="false"
            append-to-body>
            <div class="form-designer">
                <!-- <widget-form ref="widgetForm"
                :select.sync="widgetFormSelect"
                :data="widgetForm"
                @getModal="getModal"
                ></widget-form> -->
                <view-form
                   :option="option1"
                   :driverList="driverList"
                   @getModal1="getModal1"
                   :dataobj="dataobj"
                ></view-form>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {fetchList} from '@/api/car/oacarbill'
    import {getObjForm} from '@/api/activiti/oaconfig'
    import WidgetForm from '@/components/table-design/newWidgetForm'
    import RenderForm from '@/components/table-design/newRender'
    import ViewForm from '@/components/table-design/viewRender'
    import {tableOption} from '@/const/approvaltask'
    import {driverList} from '@/api/car/cardriver'
    import {billDetail, billDone, billTo, allOwn} from '@/api/bill'
    import {mapGetters} from 'vuex'

    export default {
        name: 'oacarbill',
        components: { WidgetForm, RenderForm, ViewForm },
        data() {
            return {
                driverList: [],
                formObj: {
                    code: 'car_bill_apply',
                    title: '',
                    attachment: '',
                    flag: 'start',
                    bizData: {}
                },
                activeName: 'db',
                dataobj: {},
                widgetFormSelect: {},
                searchForm: {},
                searchForm1: {},
                searchForm2: {},
                tableDataTo: [],
                tableDataDone: [],
                tableDataMy: [],
                page: {
                    total: 0, // 总页数
                    currentPage: 1, // 当前页数
                    pageSize: 20 // 每页显示多少条
                },
                page1: {
                    total: 0, // 总页数
                    currentPage: 1, // 当前页数
                    pageSize: 20 // 每页显示多少条
                },
                page2: {
                    total: 0, // 总页数
                    currentPage: 1, // 当前页数
                    pageSize: 20 // 每页显示多少条
                },
                form: {},
                widgetForm: {
                    column: [],
                    labelPosition: 'left',
                    labelSuffix: '：',
                    labelWidth: 120,
                    gutter: 0,
                    menuBtn: true,
                    submitBtn: true,
                    submitText: '提交',
                    emptyBtn: true,
                    emptyText: '清空',
                    menuPosition: 'center'
                },
                option: {},
                option1: {},
                modal: false,
                modal1: false,
                tableLoading: false,
                tableLoading1: false,
                tableLoading2: false,
                tableOption: tableOption
            }
        },
        computed: {
            ...mapGetters(['permissions', 'tagList']),
            permissionList() {
                return {
                    addBtn: false,
                    delBtn: false,
                    editBtn: false
                };
            }
        },
        created() {
            if (this.$route.params.type) {
                if(this.$route.params.type === '1') {
                    this.activeName = 'db'
                } else if(this.$route.params.type === '2') {
                    this.activeName = 'yb'
                } else {
                    this.activeName = 'wtj'
                }
            }
            driverList().then(response => {
                this.driverList = response.data.data
            })
        },
        methods: {
             // 给第5列的单元格单独设置样式（从0开始）
        cellStyle({ row, column, rowIndex, columnIndex }) {
             if (columnIndex == 5) {
                return {
                  color: "#409eff",
                 cursor: "pointer",
                   };
                }
             },
            goDetail(scope) {
                let tag = this.tagList.filter(item => {
                    return item.value.indexOf('/db/detail') !== -1
                })
                if (tag.length > 0) {
                    this.$router.$avueRouter.closeTag(tag[0])
                }
                this.$router.push({
                    name: '流程详情',
                    params: {
                        id: scope.row.billId,
                        taskId: scope.row.taskId,
                        newtitle: '流程详情-' + scope.row.flowName
                    }
                })
            },
            getListTo(page, params) {
                this.tableLoading = true
                if (this.searchForm.dateRange) {
                    this.searchForm.startDate = this.searchForm.dateRange[0];
                    this.searchForm.endDate = this.searchForm.dateRange[1];
                }
                billTo(Object.assign({
                    current: page.currentPage,
                    size: page.pageSize
                }, params, this.searchForm )).then(response => {
                    this.tableDataTo = response.data.data.records
                    this.page.total = response.data.data.total
                    this.tableLoading = false
                }).catch(() => {
                    this.tableLoading=false
                })
            },
            getListDone(page, params) {
                this.tableLoading1 = true
                if (this.searchForm1.dateRange) {
                    this.searchForm1.startDate = this.searchForm1.dateRange[0];
                    this.searchForm1.endDate = this.searchForm1.dateRange[1];
                }
                billDone(Object.assign({
                    current: page.currentPage,
                    size: page.pageSize
                }, params, this.searchForm1 )).then(response => {
                    this.tableDataDone = response.data.data.records
                    this.page1.total = response.data.data.total
                    this.tableLoading1 = false
                }).catch(() => {
                    this.tableLoading1=false
                })
            },
            getLisMy(page, params) {
                this.tableLoading2 = true
                if (this.searchForm2.dateRange) {
                    this.searchForm2.startDate = this.searchForm2.dateRange[0];
                    this.searchForm2.endDate = this.searchForm2.dateRange[1];
                }
                allOwn(Object.assign({
                    current: page.currentPage,
                    size: page.pageSize
                }, params, this.searchForm2 )).then(response => {
                    this.tableDataMy = response.data.data.records
                    this.page2.total = response.data.data.total
                    this.tableLoading2 = false
                }).catch(() => {
                    this.tableLoading2=false
                })
            },
            transDate(value) {
                if(value) {
                    let dataList = value.split(' ')[0].split('-')
                    return dataList[0] + '年' + dataList[1] + '月' + dataList[2] + '日'
                }
            },
            getModal(val) {
                this.modal = val
                this.getListTo(this.page)
                this.getListDone(this.page1)
            },
            getModal1(val) {
                this.modal1 = val
                this.getListTo(this.page)
                this.getListDone(this.page1)
            },
            addNodeform() {
                let self = this
                getObjForm('car_bill_apply').then(response => {
                    // this.transAvueOptionsToFormDesigner(response.data.data.formInfo).then(res => {
                    //     res.column.map(item => {
                    //         if (item.prop === 'title') {
                    //             item.value = response.data.data.title
                    //         }
                    //     })
                    //     self.widgetForm = res
                    //     self.modal = true
                    // })
                    self.formObj.title = response.data.data.title
                    self.option = JSON.parse(response.data.data.formInfo)
                    // 标题回填
                    self.option.column.map(item => {
                        if (item.prop === 'title') {
                            item.value = response.data.data.title
                        }
                    })
                    self.modal = true
                })
            },
            viewNodeForm(scope) {
                let self = this
                billDetail(scope.row.billId).then(response => {
                    let formInfo = JSON.parse(response.data.data.formInfo)
                    self.dataobj = response.data.data
                    self.option1 = formInfo
                    self.modal1 = true
                })
            },
            sizeChange(pageSize){
                this.page.pageSize = pageSize
            },
            currentChange(current){
                this.page.currentPage = current
            },
            searchChange(form, done) {
                this.searchForm = form
                this.page.currentPage = 1
                this.getListTo(this.page, form)
                done()
            },
            refreshChange() {
                this.getListTo(this.page)
            },
            sizeChange1(pageSize){
                this.page1.pageSize = pageSize
            },
            currentChange1(current){
                this.page1.currentPage = current
            },
            searchChange1(form, done) {
                this.searchForm1 = form
                this.page1.currentPage = 1
                this.getListDone(this.page1, form)
                done()
            },
            refreshChange1() {
                this.getListDone(this.page1)
            },
            sizeChange2(pageSize){
                this.page2.pageSize = pageSize
            },
            currentChange2(current){
                this.page2.currentPage = current
            },
            searchChange2(form, done) {
                this.searchForm2 = form
                this.page2.currentPage = 1
                this.getLisMy(this.page2, form)
                done()
            },
            refreshChange2() {
                this.getLisMy(this.page2)
            }
        }
    }
</script>
<style lang="scss">
.view-dialog{
    .el-dialog__body {
        padding-top: 0;
    }
}

.form-designer{
    outline: 0;
}
</style>
